<template>
    <!-- 左边侧边栏菜单区域 -->
    <el-aside>
        <el-menu
            router
            default-active="activeIndex"
            text-color="#606266"
            :unique-opened="true"
            @open="handleOpen"
            @close="handleClose"
        >
            <!-- v-show="item.name!='个人信息'" -->
            <div class="submenus" v-for="item in menulist" :key="item.id" v-show="item.name!='个人信息' && item.name != '名片夹'">
            <!-- 有子菜单的一级菜单 -->
                <el-submenu :index="item.id + ''" :key="item.id" v-if="item.children!=null">
                    <!-- 一级菜单的模板区域 -->
                    <template slot="title">
                        <!-- 图标 -->
                        <i :class="item.icon" style="font-size:25px"></i>
                        <!-- 文本 -->
                        <!-- <span slot="title">{{ item.name }}</span> -->
                        {{ item.name }}
                    </template>
                    <!-- 一级菜单下的二级菜单 -->
                    <div class="divover">
                      <el-menu-item
                        :index="''+subitem.path"
                        v-for="subitem in item.children"
                        :key="subitem.id"
                        v-show="subitem.name != '会议室管理'"
                    >
                        <i :class="subitem.icon" style="font-size:25px"></i>
                        <!-- <span slot="title">{{ subitem.name }}</span> -->
                        {{ subitem.name }}
                    </el-menu-item>
                    </div>
                </el-submenu>
                <!-- 没有子菜单的一级菜单 -->
                <el-menu-item :index="item.path + ''" v-else>
                    <i :class="item.icon" style="font-size: 25px"></i>
                    <!-- <span slot="title">{{ item.name }}</span> -->
                    {{ item.name }}
                </el-menu-item>
            </div>
        </el-menu>
        <div>
          <p style="text-align:center;font-size:1vw;color:#DEE1E6">软件工程4班</p>
          <p style="text-align:center;font-size:1vw;color:#DEE1E6">协同办公平台</p>
        </div>
    </el-aside>
</template>

<script>
export default {
  name: 'AsideBar',
  data() {
    return {
      // 左侧菜单数据
      menulist: [],
      activeIndex: this.$route.path,
      isCollapse: true
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    // 获取所有的菜单
    getMenuList() {
      if (!window.sessionStorage.getItem('menuList')) {
        this.getRequest('/sys/menu').then((resp) => {
          if (resp) {
            this.menulist = resp.data
            window.sessionStorage.setItem('menuList', JSON.stringify(resp.data))
            console.log('获取后端')
          }
        }, error => {
          console.log(error)
        })
      } else {
        this.menulist = JSON.parse(window.sessionStorage.getItem('menuList'))
        console.log('sessionStorage')
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style>
/** 侧边栏菜单导航栏样式 */
.el-aside {
  /* background-color: #333744; */
  /* background-color: #0F2950; */
  /* background-color: #01225a; */
  width: 12vw !important;
  height: 92.5vh;
  overflow: hidden;
}
.el-aside::-webkit-scrollbar{
  display:none;
}
/**===================== 侧边栏导航栏菜单 start ===================*/
.el-aside .el-menu{
  width: 100%;
  height: 85%;
  border-right: none;
}
.el-menu-item {
  font: 1vw '宋体';
  padding-top: 2vh;
}
.el-submenu__title {
  font: 1vw '宋体';
  padding-top: 2vh;
}
/**===================== 侧边栏导航栏菜单 end ===================*/
</style>

